<template>
	<view class="class-rank-page">
		<view class="average-info">
			<template v-if="average.publish">
				<view class="average-item top">
					<view class="num">
						{{
                            average.gradeDetail.highestScore
                                ? average.gradeDetail.highestScore
                                : "-"
                        }}
					</view>
					<view class="desc"> 年级最高分 </view>
				</view>
				<view class="average-item average">
					<view class="num">
						{{
                            average.gradeDetail.averageScore
                                ? average.gradeDetail.averageScore
                                : "-"
                        }}
					</view>
					<view class="desc"> 年级平均分 </view>
				</view>
				<view class="average-item low">
					<view class="num">
						{{
                            average.gradeDetail.lowestScore
                                ? average.gradeDetail.lowestScore
                                : "-"
                        }}
					</view>
					<view class="desc"> 年级最低分 </view>
				</view>
			</template>

			<view class="average-item top">
				<view class="num">
					{{
                        average.classDetail.highestScore
                            ? average.classDetail.highestScore
                            : "-"
                    }}
				</view>
				<view class="desc"> 班级最高分 </view>
			</view>
			<view class="average-item average">
				<view class="num">
					{{
                        average.classDetail.averageScore
                            ? average.classDetail.averageScore
                            : "-"
                    }}
				</view>
				<view class="desc"> 班级平均分 </view>
			</view>
			<view class="average-item low">
				<view class="num">
					{{
                        average.classDetail.lowestScore
                            ? average.classDetail.lowestScore
                            : "-"
                    }}
				</view>
				<view class="desc"> 班级最低分 </view>
			</view>
		</view>
		<view class="entry-list">
			<view class="entry-item">
				<view class="title">排名</view>
				<view class="title">姓名</view>
				<view class="title">分数</view>
			</view>
			<view class="entry-item"
				v-for="(itemStudent, index) in info.studentList"
				:key="itemStudent.studentCode">
				<view :class="['entry-remark', `rank-${itemStudent.classRank}`]">
					<!-- {{ itemStudent.classRank }} -->
					{{itemStudent.classRank == 1 || itemStudent.classRank == 2 ? '' : itemStudent.classRank}}
				</view>
				<view class="student-name">
					<view>
						<view style="width: 100%; text-align: center">
							{{ itemStudent.studentName }}
						</view>
					</view>
				</view>
				<view class="entry-box">
					<view style="width: 100%; text-align: center">
						{{ itemStudent.score }}
					</view>
				</view>

			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import { inputDetailId,
		classAverage } from "@/pages/achievement/api/teacher.js"
	export default {
		data() {
			return {
				classCourseId: "",
				info: {
					scopeAndType: "",
					studentList: [],
				},
				average: {
					gradeDetail: {},
					classDetail: {},
				},
			}
		},
		onLoad(options) {
			if (options?.classCourseId) {
				this.classCourseId = options.classCourseId
				this.getInfo()
				this.getAverage()
			}
		},
		methods: {
			async getInfo() {
				const { data } = await inputDetailId(this.classCourseId)
				console.log(data)
				data.studentList = data.studentList
				this.info = data
			},
			async getAverage() {
				const { data } = await classAverage(this.classCourseId)
				console.log(data)
				this.average = data
			},
		},
	}
</script>

<style lang="scss" scoped>
	.class-rank-page {
		box-sizing: border-box;
		height: 100vh;
		padding: 20rpx 30rpx;
		background: #f2f4f9;
		overflow-y: scroll;
	}

	.average-info {
		background: #ffffff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		padding: 20rpx 0;

		.average-item {
			flex: 0 0 auto;
			width: 230rpx;
			height: 150rpx;
			text-align: center;
		}

		.num {
			font-size: 54rpx;
			color: #333;
			height: 100rpx;
			line-height: 100rpx;
		}

		.desc {
			font-size: 26rpx;
			color: #d7d8d9;
		}

		.top {
			.num {
				color: #00c73d;
			}
		}

		.average {
			.num {
				color: #4174fd;
			}
		}

		.low {
			.num {
				color: #ff8948;
			}
		}
	}

	.entry-list {
		background: #ffffff;
		border-radius: 16rpx;

		.entry-item {
			width: 100%;
			height: 112rpx;
			display: flex;
			justify-content: flex-start;

			.student-name,
			.entry-box,
			.entry-remark,
			.title {
				width: 230rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				padding: 0 10rpx;
			}

			.title {
				font-weight: 600;
			}
		}
		.rank-1 {
			display: flex;
			justify-content: space-around;
			align-items: center;
		
			&:before {
				display: block;
				content: ' ';
				width: 48rpx;
				height: 48rpx;
				background: url('@/pages/achievement/static/img/first.png') 0 0 no-repeat;
				background-size: 100% 100%;
			}
		}
		
		.rank-2 {
			display: flex;
			justify-content: space-around;
			align-items: center;
		
			&:before {
				display: block;
				content: ' ';
				width: 48rpx;
				height: 48rpx;
				background: url('@/pages/achievement/static/img/secend.png') 0 0 no-repeat;
				background-size: 100% 100%;
			}
		}
	}
</style>
